import { billType } from "@/types";
import { View, Text } from "@tarojs/components";
import React from "react";
import OperateList from "@/components/operateList";
import categorys from "@/store/categorys";
import { MoneyFormat } from "@/utils/format";
import moment from "moment";
import user from "@/store/user";
import { observer } from "mobx-react";
import Taro from "@tarojs/taro";
import http from "@/request";
import { ShowToast, ToPage } from "@/utils";

import "./index.scss"

const BillList: React.FC<{
    showAccountName?: boolean,
    className?: string,
    noDataTitle?: string,
    noDataDesc?: string,
    title?: string,
    bills: billType[]
    onEdit: (bill: billType) => void
    // 自定义删除逻辑
    onDelete?: (bill: billType) => void
    onFinish?: () => void
}> = observer(({ bills, onEdit, onDelete, onFinish, title, className, noDataTitle, noDataDesc, showAccountName }) => {

    const toBillDetail = (bill: billType) => {
        ToPage(`/pages/bills/detail/index?id=${bill.id}`)
    }

    const handleDelete = (bill) => {
        if (onDelete) {
            onDelete(bill)
        } else {
            Taro.showModal({
                title: '是否删除所选账单？',
                content: '',
                success: (res: any) => {
                    if (res.confirm) {
                        http.delete(`/bills/delete/${bill.id}`).then(() => {
                            ShowToast("删除成功")
                            onFinish && onFinish()
                        }).catch(err => {
                            ShowToast(err.msg || '删除失败')
                        })
                    }
                }
            })
        }
    }

    const BillItem: React.FC = (bill: billType) => {
        const categoryMap = categorys.categoryMap
        return (
            <View className="bill-item-container flex-row">
                <View className="move-content">
                    <View className="bill-list-item font-size24 flex-column" onClick={() => toBillDetail(bill)} key={bill.id}>
                        <View className="flex-row flex-item list-item-row">
                            <View className="bill-info flex-row flex-item flex1">
                                {
                                    bill.category && categoryMap ? <>
                                        <Text className={'iconfont ' + categoryMap[bill.category]?.iconClass}></Text>
                                        <Text>{categoryMap[bill.category]?.name}</Text>
                                        {showAccountName ? <Text>（{bill.accountName}）</Text> : null}
                                    </> : null
                                }
                            </View>
                            {
                                bill.type === 0 ? <Text className="money font-size28 pay">-{MoneyFormat(bill.amount)}</Text> :
                                    bill.type === 1 ? <Text className="money font-size28 income">+{MoneyFormat(bill.amount)}</Text> :
                                        bill.type === 2 ? <>
                                            <View className="tag-item font-size16">不计收支</View>
                                            <Text className="money font-size28 flex-row flex-item">{MoneyFormat(bill.amount)}</Text>
                                        </> : null
                            }
                        </View>
                        <View className="flex-row flex-item list-item-row ">
                            <View className="bill-info flex-row flex-item flex1">
                                <Text className="iconfont icon-pinglun"></Text>
                                {bill.note ?
                                    <Text>{bill.note}</Text> :
                                    <Text style={{ opacity: 0.5 }}>没有备注</Text>
                                }
                            </View>
                        </View>
                        <View className="flex-row flex-item list-item-row">
                            <View className="bill-info flex-row flex1">
                                <Text className="iconfont icon-user-name"></Text>
                                {/* 只有在导入的时候才会没有创建人 */}
                                <Text>{bill.userName || user.info?.userName}</Text>
                                {
                                    bill.createTime ?
                                        <Text className="flex1 note font-size20">创建于{moment(bill.createTime).format('YYYY-MM-DD HH:mm:ss')}</Text> :
                                        <Text className="flex1 note font-size20">消费日期：{bill.date}</Text>
                                }
                            </View>
                        </View>
                    </View>
                </View>
                <View className="bill-move-action flex-row flex-center">
                    <View onClick={_ => onEdit(bill)} className="flex1 flex-row flex-center active-btn">
                        <Text className="iconfont icon-base-edit2"></Text>
                        <Text>编辑</Text>
                    </View>
                    <View onClick={_ => handleDelete(bill)} className="flex1 flex-row flex-center active-btn">
                        <Text className="iconfont icon-base-del"></Text>
                        <Text>删除</Text>
                    </View>
                </View>
            </View>
        )
    }

    return (
        <View className={`bill-list-card card-background need-filter ${className || ''}`}>
            <View className="list-header flex-row flex-item">
                <View className="date flex1">{title}</View>
                <View className="tip font-size24">左划编辑/删除</View>
            </View>
            <View className="bottom-line border-main-color"></View>
            {
                categorys.categoryMap ? <OperateList
                    noDataTitle={noDataTitle || '没有符合条件的账单'}
                    noDataDesc={noDataDesc || '你可以去首页创建'}
                    listData={bills || []}
                    childNode={BillItem}>
                </OperateList> : null
            }

        </View>
    )
})

export default BillList